<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  <style>
    html,body{
      height: 100%;
    }
    *{
      margin: 0px;
      padding: 0px;
    }
    .container{
      height: 100%;
      overflow: scroll;
      box-sizing: border-box;
      padding-top: 40px;
    }
    .container ul{
      list-style: none;
    }
    .red{
      color: #f00
    }
    .container ul li{
      background: #f1f1f1;
      padding: 10px;
      border-bottom: 1px solid #d2d2d2;
    }
    .user{
      line-height: 20px;
      word-break: break-all;
    }
    .itemC{
      overflow: hidden;
      position: absolute;
    width: 100%;
    }
    .online{
      width: 50%;
      float: left;
      text-align: center;
      line-height: 40px;
      font-weight: 900;
      height: 40px;
    }
    .online.active{
      color: red;
      border-bottom: 1px solid #f00;
    }
    .log{
      width: 50%;
      float: left;
      text-align: center;
      line-height:40px;
      font-weight: 900;
      height: 40px;
    }
    .log.active{
      color: red;
      border-bottom: 1px solid #f00;
    }
    #logC{
      display: none;
    }
    .itemU{
      position: relative;
    }
    .uBtn{
      position: absolute;
      right: 5px;
      color: #638bff;
    }
    .cc{
      height: 100%;
      overflow: scroll
    }
  </style>
</head>

<body>
  <div class="itemC">
    <div class="online active">在线</div>
    <div class="log">日志</div>
  </div>
  <div class="container">
    <div class="cc">
        <ul id="onlineC">
          </ul>
          <ul id="logC">
      
          </ul>
    </div>
    
  </div>
</body>
<script type="text/javascript">
  $('.online').click(function () {
    $('.online').addClass('active');
    $('.log').removeClass('active');
    $('#logC').hide();
    $('#onlineC').show();
  });
  $('.log').click(function () {
    $('.online').removeClass('active');
    $('.log').addClass('active');
    $('#onlineC').hide();
    $('#logC').show();
  });

  $('#onlineC').click('.uBtn',function(e){
    to_client_id = $(e.target).attr('id');
    
    if("暂停" == $(e.target).text()){
      send('stop');
    }
    if("开始" == $(e.target).text()){
      send('start');
    }
    $(e.target).text("切换……");
  });

  var name = Date.now();
  var to_client_id = "all";
  var to_client_name = "";
  var ws, client_list = {};

  connect();
  // 连接服务端
  function connect() {
    // 创建websocket
    ws = new WebSocket("ws://116.62.129.180:48282");
    // 当socket连接打开时，输入用户名
    ws.onopen = onopen;
    // 当有消息时根据消息类型显示不同信息
    ws.onmessage = onmessage;
    ws.onclose = function () {
      mylog("连接关闭，定时重连");
      connect();
    };
    ws.onerror = function () {
      mylog("出现错误");
    };
  }

  // 连接建立时发送登录信息
  function onopen() {
    // 登录
    var login_data = '{"type":"login","client_name":"' + name.replace(/"/g, '\\"') + '","room_id":"1"}';
    mylog("websocket握手成功，发送登录数据:" + login_data);
    ws.send(login_data);
  }

  // 服务端发来消息时
  function onmessage(e) {
    var data = JSON.parse(e.data);
    switch (data['type']) {
      // 服务端ping客户端
      case 'ping':
        ws.send('{"type":"pong"}');
        break;
        // 登录 更新用户列表
      case 'login':
        //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
        log(e.data);
        if (data['client_list']) {
          client_list = data['client_list'];
        } else {
          client_list[data['client_id']] = data['client_name'];
        }
        flush_client_list();
         
        break;
        // 发言
      case 'say':
        //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
        log(e.data);
        processData(data);
        break;
        // 用户退出 更新用户列表
      case 'logout':
        //{"type":"logout","client_id":xxx,"time":"xxx"}
        log(e.data);
        delete client_list[data['from_client_id']];
        flush_client_list();
    }
  }



  function processData(data) {
    if(data['content'].indexOf('startok')>=0){
      $('#'+data['from_client_id']).text('暂停');
    }
    if(data['content'].indexOf('stopok')>=0){
      $('#'+data['from_client_id']).text('开始');
    }
    if(data['content'].indexOf('started')>=0){
      $('#'+data['from_client_id']).text('暂停');
    }
  }
  function send(content) {
    var t = '{"type":"say","to_client_id":"' + to_client_id + '","to_client_name":"' + to_client_name + '","content":"' + content + '"}';
    ws.send(t);
    mylog(t);
  }

  // 刷新用户列表框
  function flush_client_list() {
    $("#onlineC").empty();
    for (var p in client_list) {
      online(p,"name="+client_list[p]);
      //query
      mylog("query 状态");
      to_client_id = p;
      send('queryState');
    }
  }

  // 发言
  function log(content) {
    $("#logC").append('<li>\
          <div>\
            <span class="user">' + content + '</span>\
          </div>\
        </li>');
  }
  function mylog(content) {
    $("#logC").append('<li class="red">\
          <div>\
            <span class="user">'+content+'</span>\
          </div>\
        </li>');
  }
  
  function online(id,content) {
    $("#onlineC").append('<li>\
          <div class="itemU">\
            <span class="user">' + content + '</span>\
            <span class="uBtn" id="'+id+'">开始</span>\
          </div>\
        </li>');
  }
</script>

</html>